import { Modal } from 'antd';
import React from 'react';
import LwjTable from 'components/LwjTable/LwjTable'
import OrderFilterExpand from 'components/Filter/OrderFilterExpand';

const SearchUserModal = ({
  dataSource,
  boundUsers,
  pagination,
  dispatch,
  toBeBoundUser,
  ...ModalProps,
}) => {

  _.each(dataSource, (user) => {
    let existedUser = _.find(boundUsers, (boundUser) => {
      return boundUser.id === user.id;
    });
    if (!_.isEmpty(existedUser)) {
      user.isBound = true;
    }
  });

  const listProps = {
    dataSource,
    pagination,
    pageChangeAction: 'role/queryUser',
    dispatch,
    selectedRowKeys: toBeBoundUser,
    selectType: 'multiple',
    onSelectRows(selectedRowKeys, selectRows) {
      const lastSelectedRows = selectedRowKeys[selectedRowKeys.length - 1];
      let boundUser = _.find(boundUsers, (user) => {
        return user.id === lastSelectedRows;
      });
      if (!_.isEmpty(boundUser)) {
        Modal.info({ title: '提示', content: `该用户已绑定，无需再次绑定` });
        selectedRowKeys.pop();
      }
      dispatch({
        type: 'role/updateToBeBoundUser',
        payload: { toBeBoundUser: selectedRowKeys }
      });
    }
  };

  const columns = [
    {
      title: '用户名称',
      dataIndex: 'displayName',
      key: 'displayName'
    }, {
      title: '手机号',
      dataIndex: 'mobile',
      key: 'mobile'
    }, {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email'
    }, {
      title: '是否已绑定',
      dataIndex: 'isBound',
      key: 'isBound',
      render: (text, record, index) => (record.isBound ? "是" : "否")
    }
  ];

  // 定义筛选属性 表单相关
  const filterProps = {
    filterItems: [
      {
        type: 'input',
        id: 'displayName',
        title: '用户名称'
      },
      {
        type: 'input',
        id: 'mobile',
        title: '手机号'
      }
    ],
    onFilterChange(value) {
      dispatch({
        type: 'role/queryUser',
        payload: {
          ...value,
          isEnabled:true
        }
      })
    }
  }

  return (
    <div>
      <Modal {...ModalProps}>
        <OrderFilterExpand {...filterProps} />
        <LwjTable
          {...listProps}
          columns={columns} />
      </Modal>
    </div >
  );
};

export default SearchUserModal;
